<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="登录.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>
    <style>
        .zhu:hover{
            background-color: rgb(178, 219, 243);
        }
        .deng:hover{
            background-color: rgb(178, 219, 243);
        }
        .outer{
            border:dashed rgb(0, 132, 255);
        }

    </style>
   
</head>
<body>
    
    <div class="outer">
        <div class="bian">
            <h3 style="display: inline-block;" class="zhu">账号注册</h3>
            <h3 style="display: inline-block;" class="deng">密码登录</h3>
        </div>
        
        <form class="bian">
            <input type="text" placeholder="请输入手机号或邮箱" style="height: 25px;width: 300px; border: none;" >	
            <hr/>
            <input type="password" placeholder="请输入密码" style="height: 25px;width: 300px; border: none;">
            <img src="./picture/眼睛.png" class="photo3">
            <hr />
        </form>
        <div class="bian">
            <span style="float: left">海外手机号登录</span>
            <span style="float: right">忘记密码?</span>
        </div>
        <div  class="button">
            <button class="inbutton" style="background-color:rgb(24, 101, 243) ; color:white; border:none;">注册/登录</button>
        </div>
        
        <h5  class="bian" style="color:rgb(129, 129, 127)"> 
                   手机验证后自动登录，登录即代表同意《知乎协议》《隐私保护指引》
        </h5>
        <div class="fangshi bian">
            <span style="color:rgb(129, 129, 127)">社交账号登录</span> 
            <div>
                <img src="./picture/微信.png" class="photo1">
                <span style="color:rgb(129, 129, 127)">微信</span>
            </div>
            <div>
                <img src="./picture/QQ.png" class="photo1">
                <span style="color:rgb(129, 129, 127)">QQ</span>
            </div>
            <div>
                <img src="./picture/微博.png" class="photo1">
                <span style="color:rgb(129, 129, 127)">微博</span>
            </div>
        </div>
        <div class="down">
            <div>
                <img src="./picture/徽章.png " class="photo2"><span  style="color:rgb(24, 101, 243)">开通机构号</span>
            </div>
            <div>
                <img src="./picture/爱心.png" class="photo2"><span   style="color:rgb(24, 101, 243)">无障碍</span>
            </div>
            <div>
                <img src="./picture/知.png" class="photo2"><span   style="color:rgb(24, 101, 243)">下载知乎APP</span>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="1.js"  ></script>
    
</body>
</html>